
<template>
  <div class="videoX">
    <h2>videoX</h2>
    <div id="wrapper"></div>
    <div class="mark">
      <p>
        弹幕字体大小：
        <input type="range" min="14" max="50" step="1" v-model="danmuSize">
      </p>
      <p>
        弹幕字体颜色：
        <input type="color" v-model="danmuColor">
      </p>
      <!--  <p>
        弹幕位置：
        <label :for="item" name="test" v-for="(item,index) in danmuPos" :key="index">
          <input type="radio" :value="item" :id="item" v-model="dameCheckedValue">
          {{item}}
          &nbsp;
          &nbsp;
          &nbsp;
        </label>
      </p>-->
      <p>
        弹幕内容：
        <input type="text" v-model="danmuText">
      </p>
      <!-- <button class="emit" type="button" @click="send()">发送</button> -->
      <button class="emit" type="button" @click="buibuibui()">发送</button>
    </div>
  </div>
</template>

<script>
import Chimee from "chimee";
import ChimeePlayer from "chimee-player";
import chimeePluginDanmu from "chimee-plugin-danmu";
import chimeePluginControlbar from "chimee-plugin-controlbar";

import { Radio } from "feui";

// let chimeeDanmu = chimeePluginDanmu ;
// console.log(chimeeDanmu);
// 安装插件
// Chimee.install(chimeePluginDanmu);

// Chimee.install(chimeeDanmu);
Chimee.install(chimeePluginControlbar);
//

var player = null;

export default {
  name: "videoX",
  components: {
    [Radio.name]: Radio
  },
  data() {
    return {
      danmuText: "",
      danmuPos: ["flow", "top", "bottom"],
      danmuSize: 20,
      danmuColor: "#ffffff",
      dameCheckedValue: "flow"
    };
  },
  created() {
    document.title = "弹幕";
    this.initWebSocket();
  },
  mounted() {
    var aggdPlugin = ChimeePlayer.popupFactory({
      name: "time-ad",
      className: "time-ad",
      title: false,
      body:
        '<em>广告示例</em><a href="https://jia.360.cn" target="_blank"><img src="https://p.ssl.qhimg.com/t018fe4570caeb23e44.png"></a>',
      offset: "0px 10px auto auto",
      operable: false
    });
    ChimeePlayer.install(aggdPlugin);
    ChimeePlayer.install(chimeePluginDanmu);
    player = new ChimeePlayer({
      wrapper: "#wrapper", // videoX dom容器
      src: "http://cdn.toxicjohann.com/%E4%BA%8E%E6%98%AF.mp4",
      autoplay: true,
      controls: true,
      loop: true,
      plugin: [
        chimeePluginControlbar.name,
        aggdPlugin.name,
        {
          name: chimeePluginDanmu.name,
          mode: "css",
          updateByVideo: false,
          lineHeight: 30,
          speed: 3000
        }
      ]
    });
    // console.log(player.__dispatcher.plugins.chimeeDanmu);
  },
  methods: {
    initWebSocket() {
      console.log("initWebSocket");
      const wsuri = "ws://172.30.5.37:8088/"; //ws地址
      // const wsuri = "ws://127.0.0.1:8088/"; //ws地址
      this.websock = new WebSocket(wsuri);
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      console.log("WebSocket连接成功");
      // this.websocketsend(JSON.stringify(this.msg));
    },
    websocketonerror(e) {
      //错误
      alert("Webscoket连接发生错误");
      console.log("WebSocket连接发生错误");
    },
    websocketsend(agentData) {
      //数据发送
      this.websock.send(agentData);
    },
    websocketclose(e) {
      //关闭
      console.log("connection closed (" + e.code + ")");
    },
    buibuibui() {
      this.websocketsend(JSON.stringify(this.danmuText));
      this.danmuText=''
    },
    websocketonmessage(e) {
      //数据接收
      var mes = JSON.parse(e.data);
      this.showDanmu(mes);
    },
    showDanmu(mes) {
      this.dammuFn(mes, this.danmuColor, this.danmuSize, this.dameCheckedValue);
    },
    send() {
      if (this.danmuText !== "") {
        console.log(
          this.danmuText,
          this.danmuColor,
          this.danmuSize,
          this.dameCheckedValue
        );
        this.dammuFn(
          this.danmuText,
          this.danmuColor,
          this.danmuSize,
          this.dameCheckedValue
        );
      }
    },
    dammuFn(text, color, fontSize, mode) {
      player.__dispatcher.plugins.chimeeDanmu.sendMsg({
        text,
        speed: 2,
        mode,
        color,
        fontSize: "big"
        // fontSize
      });
    }
  }
};
</script>
<style lang='less'>
.videoX{
  width: 600px;
  margin: 0 auto;
  chimee-center-state{
    display: none!important;
  }
}
#wrapper {
  position: relative;
}

.mark {
  margin: 20px 50px;
  p {
    line-height: 2;
    font-size: 16px;
  }
}
.time-ad {
  background-color: transparent;
  border: 0;
}
.time-ad img {
  display: block;
  width: 30px;
}
.time-ad em {
  position: absolute;
  right: -7px;
  top: 35px;
  width: 60px;
  text-align: center;
  font-size: 12px;
  background-color: rgba(156, 85, 85, 0.66);
  padding: 0 3px;
  z-index: -1;
  border-radius: 5px;
}
.time-ad cm-pp-close {
  display: none;
}
.time-ad cm-pp-body {
  padding: 0;
}
</style>
